{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/libs/bootstrap-editable.css">
<link rel="stylesheet" href="__PUBLIC__/admin/gzh/css/msgmb.css?v=20221110&times={:time()}"/>
<link rel="stylesheet" href="__PUBLIC__/admin/material/css/iconfont.css"/>
<link rel="stylesheet" href="__PUBLIC__/admin/material/css/tooltipify.css">
</link>
{include file="material/_ali_icon" /}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugs/webuploader/webuploader.css">
<style>
    .main-box-body .navs .active {
        background: azure;
        color: #03a9f4;
        border: 1px solid #03a9f4;
        border-radius: 5px;
    }

    a {
        color: #777;
        text-decoration: none;
    }

    a:hover {
        text-decoration: none
    }

    .table tbody > tr > td {
        padding: 3px 8px;
    }

    .table-hover > tbody > tr:nth-child(odd) {
        background-color: #f9f9f9;
    }

    .table-responsive {
        min-height: 470px;
    }
</style>
<style>
    .uploadify-button-text {
        position: relative;
        display: inline-block;
        cursor: pointer;
        background: #fff;
        padding: 0px 5px;
        color: #333;
        text-align: center;
        border-radius: 3px;
        overflow: hidden;
        border: 1px solid #ccc;
    }

    em {
        color: red;
    }
</style>
{/block}
{block name="body"}
<div class="main-box clearfix">

    <div class="main-box-body clearfix">
        <div style="display: flex;align-items: center;">
            <!-- 搜索相关 -->
            <ul class="navs clearfix" style="margin: 10px 5px;">
                <li><span class="text-muted">类型：</span></li>
                <li><a href="?" {if $type== 0}class="active" {/if}>全部</a></li>
                <li><a href="?type=1" {if $type== 1}class="active" {/if}>简介</a></li>
                <li><a href="?type=2" {if $type== 2}class="active" {/if}>自动回复</a></li>
                <li><a href="?type=3" {if $type== 3}class="active" {/if}>推送</a></li>
            </ul>
            <div class="main-box-header clearfix">
                <div class="pull-right">
                    <button type="button" id="checkALL" class="btn btn-warning"><input class="checkbox check-all" type="checkbox" style="display: inline-block;margin-top: -2px;vertical-align: middle;">
                        全选
                    </button>
                    <button type="button" class="btn btn-primary" id="createUrl">
                        <i class="fa fa-plus"></i> 添加素材 <span class="caret"></span>
                    </button>
                    <button class="btn btn-danger ajax-post confirm" url="{:url('del',array('type'=>'template'))}"
                            target-form="ids">删 除
                    </button>

                </div>

            </div>
        </div>
        <!-- 简介 -->
        <div class="tiktok">
            <div class="row toolTip">
                {volist name='list' id='vo'}
                <div class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-body" style="background: #fbfafa;">
                            <span>{$vo.book_name}<br>{$vo.content}</span>
                            <div class="show">展开</div>
                        </div>
                        <div class="panel-footer" style="flex-direction: column;">
                            <div style="justify-content: space-between;width: 100%;">
                                <div style="display: flex;align-items: center;">
                                    <input class="ids row-selected" type="checkbox" name="id[]" value="{$vo.id}"
                                           style="margin: 0;"> &nbsp;
                                    <div style="display: flex;align-items: center;">
                                        <span class="title">{$vo.uname}</span>
                                    </div>
                                </div>
                                <div style="font-size: 14px;display: flex;">
                                    <div onclick="copyContent(`{$vo.content}`, {$vo['id']})" )
                                    "
                                    class="douyin_copy " style="color:#838383;margin-right:6px">
                                    复制(<span class="copyNum emCopy4991">{$vo.copy}</span>)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mask">
                        <i class="iconfont icon-cuowu"></i>
                        <!-- <span aria-hidden="true">×</span> -->
                        <div class="content" style="background: #fbfafa;">
                            {$vo.book_name}<br>{$vo.content}
                        </div>
                        <div class="panel-footer" style="flex-direction: column;font-size: 14px;">
                            <div style="justify-content: space-between;width: 100%;margin-top: 3px;">
                                <div style="display: flex;align-items: center;">
                                    <input class="ids row-selected" type="checkbox" name="id[]" value="{$vo.id}"
                                           style="margin: 0;"> &nbsp;
                                    <div style="display: flex;align-items: center;">
                                        <span class="title">{$vo.uname}</span>
                                    </div>
                                </div>
    
                                <div style="font-size: 14px;display: flex;">
                                    <div onclick="copyContent(`{$vo.content}`, {$vo['id']})" )
                                    "
                                    class="douyin_copy" style="color:#838383;margin-right:6px">
                                    复制(<span class="copyNum emCopy4991">{$vo.copy}</span>)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                {/volist}
            </div>
        </div>
    </div>

</div>
</div>
{$page}
</div>
</div>

<div class="modal fade" id="create-referral-link-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <span style="font-size: 20px;"><span id="referralname">添加</span></span>
            </div>
            <div class="modal-body">
                <div data-bind="visible: loading" class="loading-panel" style="display: none;">
                    <i class="fa fa-spin fa-spinner"></i>
                </div>
                <form class="form-horizontal modelform">
                    <style>
                        .form-group {
                            margin-bottom: 10px;
                        }

                        .models input[type=checkbox] {
                            float: left;
                            margin-left: -20px;
                        }

                        .checkbox-inline + .checkbox-inline,
                        .radio-inline + .radio-inline {
                            margin-left: 0;
                        }

                        .required {
                            color: red;
                        }
                    </style>
                    <div class="form-group models">
                        <label class="control-label col-sm-2">类型</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="type" value="1">
                                <span>简介</span>
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="type" value="2">
                                <span>自动回复</span>
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="type" value="3">
                                <span>推送</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group models">
                        <label class="control-label col-sm-2">
                            书名</label>
                        <div class="col-sm-10">
                            {volist name='bookList' id='vo' key='k'}
                            <label class="radio-inline">
                                <input type="radio" name="book_id" value="{$k}">
                                <span>{$vo}</span>
                            </label>
                            {/volist}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">文案</label>
                        <div class="col-lg-8">
                            <textarea class="form-control" name="content" id="content" placeholder=""></textarea>
                        </div>
                    </div>
                    <div class="form-group" id="batchtxt">
                        <label class="control-label col-sm-2">批量上传</label>
                        <div class="col-lg-8">
                            <div class="picker-box">
                                <div id="picker_ebook" class="picker_button webuploader-container">
                                    <div class="webuploader-pick">
                                        <div>上传文案</div>
                                    </div>
                                    <div id="rt_rt_1ghtc96u61sng1nkg1r19u8m1tns1"
                                         style="position: absolute; inset: 0px auto auto 0px; width: 88px; height: 32px; overflow: hidden;">
                                        <input type="file" name="file" class="webuploader-element-invisible"
                                               multiple="multiple"><label
                                            style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
                                    </div>
                                </div>
                                <input type="hidden" name="ebook" id="field_ebook" value="">
                                <div id="fileList_ebook" class="upload-file-list-info">(请上传.txt文件， 1行一个文案)
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="createTemp" class="btn btn-primary ">提交</button>
            </div>
        </div>
    </div>
</div>

{/block}
{block name="script"}
<script src="__PUBLIC__/admin/material/js/jquery-tooltipify.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/layer/layer.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap-editable.min.js"></script>
<script src="__PUBLIC__/plugs/moment/moment.min.js"></script>
<script src="__PUBLIC__/plugs/moment/zh-cn.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/layer/layer.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader/webuploader.custom.js"></script>
<script type="text/javascript">
    $(function () {

        $('#createUrl').on('click', function () {

            var $modal = $('#create-referral-link-modal');
            $modal.on('shown.bs.modal', function () {
                $('#batchtxt').show()
                $('#picker_ebook').html('<div>上传文案</div>')
                $("#picker_ebook").SentUploader({
                    server: "{:url('Upload/Uploadtxt')}",
                    fileNumLimit: 1,
                    uploadEvents: {
                        uploadComplete: function (file) {
                        }
                    },
                    listName: 'fileList_ebook',
                    hiddenName: 'field_ebook',
                    hiddenValType: 2,
                    fileSingleSizeLimit: 50 * 1024 * 1024,
                    closeX: true
                });
            });
            $modal.modal({backdrop: 'static', keyboard: false});
        });

    });

    $("#createTemp").on('click', function () {
        url = "{:url('addTemplate')}"
        var data = $('.modelform').serializeJson();
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {
                    updateAlert(data.msg, 'success');
                    setTimeout(function () {
                        window.location.reload();
                    }, 100);
                } else {
                    updateAlert("添加，" + data.msg, 'danger');
                }
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        })
    });

    // 复制
    function copyContent(content, id) {
        content = content.toString().replace(/<br\/>/g, `
    `)
        content = content.replace(/<em>|<\/em>/g, '');
        var oInput = document.createElement('textarea');
        oInput.value = content;
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");
        oInput.className = 'oInput';
        oInput.style.display = 'none';
        var url = "{:url('copy')}";
        $.ajax({
            type: "POST",
            url,
            data: {id, type: 'template'},
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {
                    layer.msg('复制成功');
                    setTimeout(function () {
                        window.location.reload();
                    }, 500)
                } else {
                    updateAlert("失败，" + data.msg, 'danger');
                }
            }
        })
    }

    $('.panel-body .show').click(function () {
        $(this).parent().parent().siblings().show()
    })
    $('.mask i').click(function () {
        $(this).parent().hide()
    })
</script>
{/block}